<template>
    <ServiceListSortVue />
    <TaskListContent></TaskListContent>
</template>

<script lang="ts" setup>
import { reactive, ref, Ref } from 'vue';
import { getpageQueryTaskList } from '@/api/api.query.util';
import TaskListContent from '@/views/TaskList/Components/TaskListContent.vue';
import ServiceListSortVue from '@/components/ServiceListSort.vue';
</script>
<style scoped>
.service-ad-pic_wrapper {
    height: 128px;
    margin-bottom: 16px;   
}

.service-ad-pic_wrapper img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

.service-nav {
    display: flex;
    justify-content: space-between;
    height: 50px;
    background-color: var(--section-color);
    border-radius: var(--border-radius);
    margin-bottom: 18px;
}

.service-category {
    display: flex;
}
.service-category > li {
    display: flex;
    align-items: center;
    padding: 0 40px;
}

.service-filter_icon {
    width: 16px;
    height: 16px;
    background: url('~@/assets/image/shaixuan_default@2x.png') no-repeat center center / 16px;
    cursor: pointer;
}

.service-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 56px;
}
</style>
